<route lang="json5">
{
  style: { navigationBarTitleText: '位置' },
}
</route>
<template>
  <div class="input-box">
    <div class="input">
      <wd-input
        v-model="searchText"
        placeholder="请输入名称搜索"
        clearable
        prefix-icon="search"
        no-border
      />
    </div>
  </div>

  <view class="wraper">
    <wd-index-bar sticky>
      <Search @hotCity="handleClick" />
      <div class="pb-30px">
        <view v-for="item in data" :key="item.index">
          <wd-index-anchor :index="item.index" customClass="anchor" />
          <div class="cell-group">
            <template v-for="city in item.data">
              <wd-cell
                clickable
                :key="city"
                :title="city"
                @click="handleClick(city)"
                customClass="cell"
                v-if="city.includes(searchText)"
              ></wd-cell>
            </template>
          </div>
        </view>
      </div>
    </wd-index-bar>
  </view>
</template>

<script lang="ts" setup>
import Search from './components/Search.vue'
import { back } from '@/utils/page'

const data = ref([
  {
    index: 'A',
    data: ['阿坝', '阿拉善', '阿里', '安康', '安庆', '鞍山', '安顺', '安阳', '澳门'],
  },
  {
    index: 'B',
    data: [
      '北京',
      '白银',
      '保定',
      '宝鸡',
      '保山',
      '包头',
      '巴中',
      '北海',
      '蚌埠',
      '本溪',
      '毕节',
      '滨州',
      '百色',
      '亳州',
    ],
  },
  {
    index: 'C',
    data: [
      '重庆',
      '成都',
      '长沙',
      '长春',
      '沧州',
      '常德',
      '昌都',
      '长治',
      '常州',
      '巢湖',
      '潮州',
      '承德',
      '郴州',
      '赤峰',
      '池州',
      '崇左',
      '楚雄',
      '滁州',
      '朝阳',
    ],
  },
  {
    index: 'D',
    data: [
      '大连',
      '东莞',
      '大理',
      '丹东',
      '大庆',
      '大同',
      '大兴安岭',
      '德宏',
      '德阳',
      '德州',
      '定西',
      '迪庆',
      '东营',
    ],
  },
  {
    index: 'E',
    data: ['鄂尔多斯', '恩施', '鄂州'],
  },
  {
    index: 'F',
    data: ['福州', '防城港', '佛山', '抚顺', '抚州', '阜新', '阜阳'],
  },
  {
    index: 'G',
    data: ['广州', '桂林', '贵阳', '甘南', '赣州', '甘孜', '广安', '广元', '贵港', '果洛'],
  },
  {
    index: 'H',
    data: [
      '杭州',
      '哈尔滨',
      '合肥',
      '海口',
      '呼和浩特',
      '海北',
      '海东',
      '海南',
      '海西',
      '邯郸',
      '汉中',
      '鹤壁',
      '河池',
      '鹤岗',
      '黑河',
      '衡水',
      '衡阳',
      '河源',
      '贺州',
      '红河',
      '淮安',
      '淮北',
      '怀化',
      '淮南',
      '黄冈',
      '黄南',
      '黄山',
      '黄石',
      '惠州',
      '葫芦岛',
      '呼伦贝尔',
      '湖州',
      '菏泽',
    ],
  },
])

let instance = null
onLoad(() => {
  instance = getCurrentInstance().proxy
})

const searchText = ref('')

// 确认选择
function handleClick(city) {
  const eventChannel = instance.getOpenerEventChannel()
  eventChannel.emit('getBackData', {
    backData: city,
  })
  back()
}
</script>

<style lang="scss">
.input-box {
  display: flex;
  align-items: center;
  height: 124rpx;
  padding: 0rpx 30rpx;
  background-color: #fff;
  .input {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    width: 100%;
    height: 80rpx;
    padding: 0 30rpx;
    background: var(--bgc4);
    border-radius: 20rpx;
    --wot-input-bg: var(--bgc4);
    --wot-input-icon-color: var(--color4);
    --wot-input-placeholder-color: var(--color4);
    :deep(.wd-input) {
      width: 100%;
    }
  }
}
.wraper {
  height: calc(100vh - 124rpx);
  background-color: var(--bgc4);
  --wot-color-theme: var(--color2);
  :deep(.wd-index-anchor) {
    font-size: 30rpx;
    font-weight: 600;
    color: var(--color1);
  }
  .cell-group {
    margin: 0 30rpx;
    overflow: hidden;
    border-radius: 30rpx;
    --wot-cell-title-fs: var(--color2);
    :deep(.cell) {
      .wd-cell__title {
        font-size: 27rpx;
      }
    }
  }
  :deep(.wd-index-bar__sidebar) {
    z-index: 10;
    --wot-color-title: var(--color4);
    &.is-active {
      color: var(--color1);
    }
  }
}
</style>
